<template>
  <div class="container-fluid">
    <div class="row header">
      <div class="logo">
        系统管理页面
      </div>
    </div>
    <div class="row">
      <div class="col">
        <fieldset>
          <legend>网站列表:</legend>
          <el-table
            :data="sites"
            border
            stripe
            v-loading="siteLoading"
            tooltip-effect="dark"
            ref="table"
          >
            <el-table-column
              type="selection"
              width="48" align="center" fixed="left">
            </el-table-column>

            <el-table-column label="ID" width="80" prop="id">

            </el-table-column>

            <el-table-column
              label="网站名称" width="140" prop="cnName"
            >
            </el-table-column>
            <el-table-column
              label="网站地址" min-width="200"
            >
              <template slot-scope="scope">
                <a :href="httpHref(scope.row.webUrl)" target="_blank">{{scope.row.webUrl}}</a>
              </template>
            </el-table-column>
            <el-table-column
              label="网站标识" min-width="200" prop="identify"
            >

            </el-table-column>
            <el-table-column
              label="数据库地址" min-width="300" prop="dbUrl"
            >
            </el-table-column>

            <el-table-column
              label="数据库用户名" min-width="120" prop="dbUserName"
            >
            </el-table-column>
            <el-table-column
              label="创建日期" min-width="140px" prop="createTime"
            >
            </el-table-column>
            <el-table-column
              label="过期时间" min-width="140px" prop="expires"
            >
            </el-table-column>
            <el-table-column
              label="备注" min-width="140px" prop="note"
            >
            </el-table-column>

            <el-table-column label="状态" align="center" width="80" prop="status">
            </el-table-column>
            <el-table-column label="缓存操作" width="180" align="center" fixed="right">
              <template slot-scope="scope">
                <el-tooltip placement="top">
                  <div slot="content">清楚数据库连接的缓存信息</div>
                  <el-button type="text" @click="clearDataBaseCache(scope.$index,scope.row)">数据库</el-button>
                </el-tooltip>
                <div class="divider divider-vertical"></div>
                <el-tooltip placement="top">
                  <div slot="content">清楚模版的缓存信息</div>
                  <el-button type="text" @click="clearTemplateCache(scope.$index,scope.row)">模版</el-button>
                </el-tooltip>
                <div class="divider divider-vertical"></div>
                <el-tooltip placement="top">
                  <div slot="content">清楚全部相关的缓存</div>
                  <el-button type="text" @click="clearAllCache(scope.$index,scope.row)">全部</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="siteSizeChange"
            @current-change="siteCurrentChange"
            :current-page="siteSearch.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="siteSearch.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="siteSearch.pagination.total">
          </el-pagination>


        </fieldset>
      </div>
    </div>
    <br/>
    <div class="row">
      <div class="col">
        <fieldset>
          <legend>任务列表:
            <el-button type="primary" @click="addTask">添加任务</el-button>
          </legend>
          <el-table
            :data="tasks"
            border
            :loading="taskLoading"
            tooltip-effect="dark"
            ref="sitetable"
          >
            <el-table-column
              type="selection"
              width="48" align="center" fixed="left">
            </el-table-column>

            <el-table-column
              label="任务名称" min-width="140"
            >
              <template slot-scope="scope">{{ scope.row.sn }}</template>
            </el-table-column>

            <el-table-column
              label="任务码" width="140"
            >
            </el-table-column>

            <el-table-column
              label="任务组" width="140"
            >
            </el-table-column>

            <el-table-column
              label="任务类" min-width="140"
            >
            </el-table-column>

            <el-table-column
              label="参数" min-width="140"
            >
            </el-table-column>

            <el-table-column
              label="状态" width="140"
            >
            </el-table-column>


            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
          </el-table>
        </fieldset>
      </div>
    </div>
    <h-task-edit-dialog :show.sync="addDialogShow" v-model="currentData" @success="doneCreateTask"></h-task-edit-dialog>
  </div>
</template>
<script>
  import SysService from 'src/service/sys'
  import HTaskEditDialog from "../components/TaskEditDialog";

  export default {
    name: 'SysMainPage',
    components: {HTaskEditDialog},
    data() {
      return {
        sites: [],
        siteLoading: false,
        tasks: [],
        taskLoading: false,
        currentData: null,
        siteSearch: {
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          orderBy: "id"
        },
        addDialogShow: false
      }
    },
    methods: {
      /**
       * 添加定时任务
       */
      addTask: function () {
        this.currentData = null;
        this.addDialogShow = true;
      },
      doneCreateTask: function (data) {
        this.addDialogShow = false;
        this.siteSearch.pagination.page = 1;
        this.searchSite();
      },
      //添加任务查询
      searchTask: function (data) {

      },


      searchSite: function () {
        const me = this;
        me.siteLoading = true;
        SysService.searchSite(me.siteSearch).then(ds => {
          if (ds != null) {
            me.sites = ds.datas;
            me.siteSearch.pagination = ds.pagination;
          }
          me.siteLoading = false;
        })
      },
      httpHref: function (url) {
        if (url == null) {
          return "#"
        }
        if (url.indexOf("http") === 0) {
          return url;
        } else {
          return "http://" + url;
        }
      },
      siteSizeChange: function (size) {
        this.siteSearch.pagination.limit = size;
        this.searchSite();
      },
      siteCurrentChange: function (page) {
        this.siteSearch.pagination.page = page;
        this.searchSite();
      },
      //清楚所有的缓存
      clearAllCache: function (index, data) {
        const me = this;
        SysService.clearAllCache({
          siteId: data.id
        }).then(ds => {
          if (ds != null) {
            me.$message.success("清除[" + data.cnName + "]的所有缓存成功。");
          }
        })
      },
      //清楚数据库缓存
      clearDataBaseCache: function (index, data) {
        const me = this;
        SysService.clearDataBaseCache({
          siteId: data.id
        }).then(ds => {
          if (ds != null) {
            me.$message.success("清除[" + data.cnName + "]的数据库链接缓存成功。");
          }
        })
      },
      //清楚模版缓存
      clearTemplateCache: function (index, data) {
        const me = this;
        SysService.clearViewTemplateCache({
          siteId: data.id
        }).then(ds => {
          if (ds != null) {
            me.$message.success("清除[" + data.cnName + "]的模版缓存成功。");
          }
        })

      }
    },

    beforeMount: function () {
      this.searchSite()
    }
  }
</script>
